<template>
    <div class="container">
        <h1>疾病信息库</h1>
        <!-- header -->
        <el-container>
            <el-header>
                <el-row :gutter="20">
                    <el-col :span="8">
                        <div class="grid-content bg-purple-dark">
                            <button class="nav-link" active-class="active-link" v-for="(ill, index) in illtitle"
                                @click="sendIndex(index)">{{ ill.text }}</button>
                        </div>
                    </el-col>
                </el-row>
            </el-header>
        </el-container>

        <div class="box">
            <!-- 两个echarts图 -->
            <div class="chart">
                <div id="map2"></div>
                <div id="map1"></div>
            </div>

            <!-- 段落 -->
            <div class="introduction">
                <h1>{{ illtitle[illindex].text }}</h1>
                <h3><span class="iconfont icon-yiliao_jibingbaike"></span>疾病简介:</h3>
                <p>&nbsp;&nbsp;&nbsp;&nbsp;{{ illness[illindex].text }}</p>
                <h3><span class="iconfont icon-zhengzhuang"></span>表现症状:</h3>
                <p>&nbsp;&nbsp;&nbsp;&nbsp;{{ Symptom[illindex].text }}</p>
                <h3><span class="iconfont icon-hesuanjiance"></span>传播途径:</h3>
                <p>&nbsp;&nbsp;&nbsp;&nbsp;{{ tranform[illindex].text }}</p>
                <h3><span class="iconfont icon-yiyuan1"></span>预防治疗:</h3>
                <p>&nbsp;&nbsp;&nbsp;&nbsp;{{ serve[illindex].text }}</p>

            </div>

        </div>

    </div>
</template>

<script>
import * as echarts from "echarts";
import "echarts-wordcloud"; // 导入词云图的模块
import '@/assets/iconfont/information-base/iconfont.css'

export default {
    data() {
        return {
            illindex: 0,
            illtitle:
                [
                    { text: "手足口病" },
                    { text: "流感" },
                    { text: "猩红热" },
                ],

            illness:
                [
                    { text: "手足口病（Hand foot and mouth disease HFMD）是一种儿童传染病，又名发疹性水疱性口腔炎。多发生于5岁以下儿童，可引起手、足、口腔等部位的疱疹，少数患儿可引起心肌炎、肺水肿、无菌性脑膜脑炎等并发症。个别重症患儿如果病情发展快，导致死亡。该病以手、足和口腔粘膜疱疹或破溃后形成溃疡为主要临床症状。手足口病是由肠道病毒引起的传染病，引发手足口病的肠道病毒有20多种（型），其中以柯萨奇病毒A16型（Cox A16）和肠道病毒71型（EV 71）最为常见。" },
                    { text: "流感流行性感冒（Influenza）简称流感,是由流感病毒引起的一种急性呼吸道传染病。流感病毒是引起流感的病原体，属正粘病毒科，系RNA病毒，直径80～120nm，呈球形或丝状。流感病毒可分为甲（A）、乙（B）、丙（C）三型。其特点是容易发生变异，其中甲型流感病毒最容易发生变异，可感染人和多种动物，为人类流感的主要病原，常引起大流行和中小流行。乙型流感病毒变异较少，可感染人类，引起爆发或小流行。丙型较稳定，可感染人类，多为散发病例，目前发现猪也可被感染。" },
                    { text: "猩红热为A组β型溶血性链球菌（也称为化脓链球菌）感染引起的急性呼吸道传染病。其临床特征为发热、咽峡炎、全身弥漫性鲜红色皮疹和疹退后明显脱屑。少数患者患病后可出现变态反应性心、肾、关节的损害。猩红热是由产毒素的链球菌感染引起的，通常伴随喉咙感染。" },
                ],
            Symptom:
                [
                    { text: "轻症患者早期有咳嗽流涕和流口水等类似上呼吸道感染的症状，有的孩子可能有恶心、呕吐等反应。发热1～2天后开始出现皮疹，通常在手足、臀部出现，或出现口腔粘膜疱疹。有的患儿不发热，只表现为手、足、臀部皮疹或疱疹性咽峡炎，病情较轻。大多数患儿在一周以内体温下降、皮疹消退，病情恢复。重症患者病情进展迅速，在发病1-5天左右出现脑膜炎、脑炎、脑脊髓炎、肺水肿、循环障碍等，极少数病例病情危重，可致死亡，存活病例可留有后遗症。重症患者表现为精神差、嗜睡、易惊、头痛、呕吐、甚至昏迷；肢体抖动，肌阵挛、眼球运动障碍；呼吸急促、呼吸困难，口唇紫绀，咳嗽，咳白色、粉红色或血性泡沫样痰液；面色苍灰、四肢发凉，指（趾）发绀；脉搏浅速或减弱甚至消失，血压升高或下降。" },
                    { text: "主要以发热、头痛、肌痛和全身不适起病，体温可达 39～40℃，可有畏寒、寒战，多伴全身肌肉关节酸痛、乏力、食欲减退等全身症状，常有咽喉痛、干咳，可有鼻塞、流涕、胸骨后不适，颜面潮红，眼结膜充血等。部分患者症状轻微或无流感症状。感染乙型流感的儿童常以呕吐、腹痛、腹泻为主要表现" },
                    { text: "急性起病，可表现为高热伴咽痛，发病后次日出现皮疹，皮疹始见于耳后、颈及上胸部，1 天内蔓延至全身。典型的皮疹为在皮肤充血的基础上有猩红色弥漫细小斑丘疹，压之面部皮肤充血，口、鼻周围充血不明显，形成“口周苍白圈”；在腋下、肘部及腹股沟的皮肤皱褶处，皮疹密集，色深红，间或有出血点，呈横线状，称之为“帕氏线”。皮疹多在 1周内消退，1 周末至第 2 周开始脱屑，躯干常呈糠样脱屑，皮疹严重者四肢、手掌、足底可出现片状脱皮" },
                ],
            tranform:
                [
                    { text: "通过接触被病毒污染的手、毛巾、手绢、牙杯、玩具、食具、奶具以及床上用品、内衣等引起感染；还可通过呼吸道飞沫传播；饮用或食入被病毒污染的水和食物亦可感染。" },
                    { text: "病毒主要通过打喷嚏和咳嗽等飞沫传播，经口腔、鼻腔、眼睛等黏膜直接或间接接触感染。接触被病毒污染的物品也可通过上述途径感染。在特定场所，如人群密集且密闭或通风不良的房间内，也可能通过气溶胶的形式传播，需引起警惕" },
                    { text: "主要通过呼吸道飞沫传播和接触被病菌污染的玩具、用具、手及食物等传播，还可通过受损的皮肤感染。" },

                ],
            serve:
                [
                    { text: "保持良好的个人卫生习惯是预防手足口病的关键。勤洗手，不要让儿童喝生水，吃生冷食物。体温超过38.5℃者，采用物理降温（温水擦浴、使用退热贴等）或应用退热药物治疗。常用药物有：布洛芬口服，5～10mg/（kg·次）；对乙酰氨基酚口服，10～15mg/（kg·次)；两次用药的最短间隔时间为6小时。" },
                    { text: "通过接触被病毒污染的手、毛巾、手绢、牙杯、玩具、食具、奶具以及床上用品、内衣等引起感染；还可通过呼吸道飞沫传播；饮用或食入被病毒污染的水和食物亦可感染。" },
                    { text: "猩红热患者应隔离至症状消失，咽拭子培养阴性或治疗之日起不少于 7 天。对密切接触者需检疫 1 周，必要时可口服青霉素类或头孢菌素类药物进行暴露后预防。治疗原则为控制感染，抗菌药物应足量、全程，有助于缩短病程，预防风湿热、肾小球肾炎等并发症。按呼吸道传染病隔离。做好皮肤和口腔护理，补充水、电解质，给予必要的营养，高热可予非甾体类抗炎药等退热。" },

                ]
            ,



            chartpage:
                [
                    //1 手足口病饼图
                    {
                        title:
                        {
                            text: this.title,
                            left: 'center'
                        },
                        title: {
                            text: '手足口病全国患病人数前五省份',
                            x: 'center',
                            textStyle: {
                                fontSize: 25,
                                color: 'black'
                            }

                        },

                        tooltip:
                        {
                            trigger: 'item'
                        },
                        grid: {

                            top: 200,
                        },
                        legend:
                        {
                            orient: 'vertical',
                            left: 'left',
                            textStyle: { // 图例文字样式配置
                                color: 'balck' // 设置图例文字颜色为白色
                            }
                        },
                        series:
                            [
                                {
                                    name: '手足口病全国患病人数前五省份',
                                    type: 'pie',
                                    radius: '80%',
                                    data:
                                        [
                                            { "value": 2172, "name": "北京市" },
                                            { "value": 1131, "name": "天津市" },
                                            { "value": 4999, "name": "河北省" },
                                            { "value": 4551, "name": "山西省" },
                                            { "value": 881, "name": "内蒙古" }
                                        ],
                                    emphasis: {
                                        itemStyle: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        }
                                    }
                                }
                            ]
                    },

                    //2 流感饼图
                    {
                        title:
                        {
                            text: this.title,
                            left: 'center'
                        },
                        title: {
                            text: '流感全国患病人数前五省份',
                            x: 'center',
                            textStyle: {
                                fontSize: 25,
                                color: 'black'
                            }

                        },
                        tooltip:
                        {
                            trigger: 'item'
                        },
                        legend:
                        {
                            orient: 'vertical',

                            left: '0%', // 图例相对位置在图的左中间
                            top: "10%",
                            // top: 'center', // 图例垂直居中显示1
                            textStyle: { // 图例文字样式配置
                                color: 'balck' // 设置图例文字颜色为白色
                            }
                        },
                        series:
                            [
                                {
                                    name: '流感全国患病人数前五省份',
                                    type: 'pie',
                                    radius: '80%',
                                    data: [
                                        { "value": 256494, "name": "浙江省" },
                                        { "value": 138940, "name": "广东省" },
                                        { "value": 88394, "name": "河南省" },
                                        { "value": 94186, "name": "湖南省" },
                                        { "value": 76525, "name": "北京市" }
                                    ],
                                    emphasis: {
                                        itemStyle: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        }
                                    }
                                }
                            ]
                    },
                    //3 猩红热饼图
                    {
                        title:
                        {
                            text: this.title,
                            left: 'center'
                        },
                        title: {
                            text: '猩红热全国患病人数前五省份',
                            x: 'center',
                            textStyle: {
                                fontSize: 23,
                                color: 'black'
                            }

                        },
                        tooltip:
                        {
                            trigger: 'item'
                        },
                        legend:
                        {
                            orient: 'vertical',
                            left: 'left',
                            textStyle: { // 图例文字样式配置
                                color: 'balck' // 设置图例文字颜色为白色
                            }
                        },
                        series:
                            [
                                {
                                    name: '猩红热全国患病人数前五省份',
                                    type: 'pie',
                                    radius: '80%',
                                    data:
                                        [
                                            { "value": 300, "name": "北京市" },
                                            { "value": 274, "name": "天津市" },
                                            { "value": 727, "name": "河北省" },
                                            { "value": 524, "name": "山西省" },
                                            { "value": 427, "name": "内蒙古" }
                                        ],
                                    emphasis: {
                                        itemStyle: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        }
                                    }
                                }
                            ]
                    },

                ],
            chartpages2:
                [
                    //1 手足口病关键词词云
                    {
                        title: [
                            {
                                text: '手足口病关键词词云',
                                x: 'center',
                                textStyle: {
                                    fontSize: 25,
                                    color: '#0d2d42',
                                    fontFamily: '楷体' // 将字体设置为楷体
                                }

                            }
                        ],
                        series: [{
                            name: '手足口病关键词词云',
                            type: 'wordCloud',
                            textPadding: 0,
                            autoSize: {
                                enable: true,
                                minSize: 6
                            },
                            textStyle: {

                                color: function () {
                                    return 'rgb(' + [
                                        Math.round(Math.random() * 105) + 150,
                                        Math.round(Math.random() * 105) + 150,
                                        Math.round(Math.random() * 105) + 150
                                    ].join(',') + ')';
                                },

                                emphasis: {
                                    shadowBlur: 10,
                                    shadowColor: '#333'
                                }
                            },
                            data: [
                                { "value": 1000, "name": "幼童" },
                                { "value": 800, "name": "发热" },
                                { "value": 600, "name": "口腔溃疡" },
                                { "value": 400, "name": "皮疹" },
                                { "value": 200, "name": "水疱" },
                                { "value": 150, "name": "食欲减退" },
                                { "value": 100, "name": "喉咙痛" },
                                { "value": 200, "name": "喉咙不适感" },
                                { "value": 30, "name": "婴幼儿" },
                                { "value": 10, "name": "肠道病毒" },
                                { "value": 80, "name": "儿童" },
                                { "value": 150, "name": "发热" },
                                { "value": 250, "name": "水疱" },
                                { "value": 120, "name": "疹病" },
                                { "value": 200, "name": "传染" },
                                { "value": 350, "name": "病例" },
                                { "value": 180, "name": "幼儿园" },
                                { "value": 280, "name": "预防措施" },
                                { "value": 400, "name": "感染" },
                                { "value": 360, "name": "症状" },
                                { "value": 220, "name": "咽喉痛" },
                                { "value": 160, "name": "腹泻" },
                                { "value": 550, "name": "医疗" },
                                { "value": 320, "name": "疫苗" },
                                { "value": 240, "name": "诊断" },
                                { "value": 130, "name": "检查" },
                                { "value": 180, "name": "饮食" },
                                { "value": 100, "name": "卫生保健" },
                                { "value": 420, "name": "流行病学" },
                                { "value": 600, "name": "疾病" },
                                { "value": 250, "name": "免疫" },
                                { "value": 130, "name": "病毒学" },
                                { "value": 290, "name": "防控" },
                                { "value": 400, "name": "免疫力" },
                                { "value": 180, "name": "传播" },
                                { "value": 220, "name": "治疗" },
                                { "value": 190, "name": "疫情" },
                                { "value": 120, "name": "儿童保健" }
                            ]
                        }]
                    },

                    //2 流感关键词词云
                    {
                        title: [
                            {
                                text: '流感关键词词云',
                                x: 'center',
                                textStyle: {
                                    fontSize: 25,
                                    color: '#0d2d42',
                                    fontFamily: '楷体' // 将字体设置为楷体
                                }

                            }
                        ],
                        series: [{
                            name: '流感关键词词云',
                            type: 'wordCloud',
                            textPadding: 0,
                            autoSize: {
                                enable: true,
                                minSize: 6
                            },
                            textStyle: {

                                color: function () {
                                    return 'rgb(' + [
                                        Math.round(Math.random() * 105) + 150,
                                        Math.round(Math.random() * 105) + 150,
                                        Math.round(Math.random() * 105) + 150
                                    ].join(',') + ')';
                                },
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowColor: '#333'
                                }
                            },
                            data: [
                                { "value": 1000, "name": "呼吸道感染" },
                                { "value": 800, "name": "高热" },
                                { "value": 600, "name": "咳嗽（干咳）" },
                                { "value": 400, "name": "肌肉或关节疼痛" },
                                { "value": 200, "name": "极度疲乏" },
                                { "value": 150, "name": "头痛" },
                                { "value": 100, "name": "喉咙痛" },
                                { "value": 50, "name": "流鼻涕" },
                                { "value": 30, "name": "鼻塞" },
                                { "value": 10, "name": "寒战和盗汗" },
                                { "value": 300, "name": "高度传染性" },
                                { "value": 280, "name": "病毒" },
                                { "value": 80, "name": "咳嗽" },
                                { "value": 200, "name": "发热" },
                                { "value": 120, "name": "喉咙痛" },
                                { "value": 180, "name": "鼻塞" },
                                { "value": 250, "name": "流感疫苗" },
                                { "value": 350, "name": "疾病" },
                                { "value": 100, "name": "传染" },
                                { "value": 220, "name": "咽喉不适感" },
                                { "value": 400, "name": "预防措施" },
                                { "value": 360, "name": "症状" },
                                { "value": 280, "name": "医疗" },
                                { "value": 160, "name": "诊断" },
                                { "value": 130, "name": "检查" },
                                { "value": 180, "name": "治疗" },
                                { "value": 220, "name": "饮食" },
                                { "value": 190, "name": "卫生保健" },
                                { "value": 120, "name": "免疫力" },
                                { "value": 100, "name": "流行病学" }
                            ]
                        }]
                    },

                    //3  猩红热关键词词云
                    {
                        title: [
                            {
                                text: '猩红热关键词词云',
                                x: 'center',
                                textStyle: {
                                    fontSize: 25,
                                    color: '#0d2d42',
                                    fontFamily: '楷体' // 将字体设置为楷体
                                }

                            }
                        ],
                        series: [{
                            name: '猩红热关键词词云',
                            type: 'wordCloud',
                            textPadding: 0,
                            autoSize: {
                                enable: true,
                                minSize: 6
                            },
                            textStyle: {
                                color: function () {
                                    return 'rgb(' + [
                                        Math.round(Math.random() * 105) + 150,
                                        Math.round(Math.random() * 105) + 150,
                                        Math.round(Math.random() * 105) + 150
                                    ].join(',') + ')';
                                },
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowColor: '#333'
                                }
                            },
                            data: [
                                { "value": 1000, "name": "A组链球菌感染" },
                                { "value": 800, "name": "高热和寒战（病发初期）" },
                                { "value": 600, "name": "喉咙痛" },
                                { "value": 400, "name": "典型的猩红色皮疹" },
                                { "value": 200, "name": "草莓舌" },
                                { "value": 150, "name": "脸部发红" },
                                { "value": 100, "name": "链球菌感染" },
                                { "value": 50, "name": "脖子" },
                                { "value": 30, "name": "胸部" },
                                { "value": 150, "name": "猩红热" },
                                { "value": 280, "name": "细菌感染" },
                                { "value": 80, "name": "咽喉炎" },
                                { "value": 200, "name": "高热" },
                                { "value": 120, "name": "皮肤疹" },
                                { "value": 180, "name": "咽峡炎" },
                                { "value": 250, "name": "链球菌" },
                                { "value": 350, "name": "传染性" },
                                { "value": 100, "name": "发热" },
                                { "value": 220, "name": "咽喉肿胀" },
                                { "value": 400, "name": "抗生素治疗" },
                                { "value": 360, "name": "咽喉疼痛" },
                                { "value": 280, "name": "抗生素耐药" },
                                { "value": 160, "name": "诊断" },
                                { "value": 130, "name": "检查" },
                                { "value": 180, "name": "治疗方案" },
                                { "value": 220, "name": "饮食建议" },
                                { "value": 190, "name": "免疫系统" },
                                { "value": 120, "name": "疫苗接种" },
                                { "value": 100, "name": "卫生保健" }

                            ]
                        }]
                    },
                ]
        }
    },
    mounted() {
        this.initPieChart();
    },
    methods: {
        sendIndex(index) {
            this.illindex = index;
            this.updatePieChart();
        },
        updatePieChart() {
            const option = this.cloudChart.getOption();
            const newOption = this.chartpage[this.illindex];
            this.cloudChart.setOption(newOption);

            // 如果您需要更新个图表，请在这里做相同的操作
            const option2 = this.cloudChart2.getOption();
            const newOption2 = this.chartpages2[this.illindex];
            this.cloudChart2.setOption(newOption2);
        },
        initPieChart() {
            this.cloudChart = echarts.init(document.getElementById('map1'));
            let option = this.chartpage[this.illindex]
            this.cloudChart.setOption(option);

            // 第二个图
            this.cloudChart2 = echarts.init(document.getElementById('map2'));
            let option2 = this.chartpages2[this.illindex]
            this.cloudChart2.setOption(option2);
        },
    },
}

</script>



<style scoped>
h1 {
    text-align: center;
    height: 45px;
    font-size: 45px;
    font-family: 楷体, KaiTi, STKaiti, "Microsoft YaHei", sans-serif;
}

.container {
    background: url(../../../public/image/back3.png);
    /* width: 1920px;
  height: 1019px; */
    padding-top: 58px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.el-header {
    width: 100%;
    height: 90px;
    color: #333;
    text-align: center;
    line-height: 25px;
}

.el-main {
    color: #333;
    text-align: center;
    line-height: 160px;
    width: 100%;
    height: 100%;
}

.el-container {
    margin-top: 7px;
    width: 100%;
    height: 100%;
    overflow: auto;
}

.el-row {
    margin-bottom: 20px;
    /* background: #99a9bf; */
    display: flex;
    align-items: center;
    justify-content: center;
}

.el-col {
    border-radius: 4px;
    text-align: center;
}

.bg-purple-dark {
    /* background: #99a9bf; */
    transition: background-color 0.3s ease;
}

.nav-link {
    display: inline-block;
    margin: 10px 0;
    padding: 10px 20px;
    border-radius: 20px;
    color: rgb(255, 0, 0);
    text-decoration: none;
    transition: transform 0.2s ease, background-color 0.3s ease;
}

.nav-link:hover,
.active-link {
    transform: translateY(-2px);
    background-color: #66707f;
}

.active-link {
    font-weight: bold;
    background-color: #556270;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

.bg-purple {
    background: #d3dce6;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

.row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
}

.box {
    width: 100%;
    height: 900px;
    margin-top: 10px;
    display: flex;
}

.chart {
    width: 900px;
    height: 870px;
}

#map1 {
    width: 100%;
    height: 470px;
}

#map2 {
    width: 100%;
    height: 390px;
}

.introduction {
    width: 950px;
    height: 830px;
    margin-left: 10px;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    font-family: "楷体";
    font-size: 18px;
    line-height: 1.5;
    color: #333;
}
.iconfont{
    font-size: 40px;
    /* color: #66707f; */
}
</style>